import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import postCssPxToRem from  "postcss-pxtorem"
// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: "0.0.0.0",   // 解决控制台： NextWork：use --host to expose
    port: 8080,
    hmr: true,  // 开启热更新
    open: true,  // 启动在浏览器打开
    proxy: {
      '/api': {
        target: 'https://www.北纬叁石.中国/api/',
        // target就是你要访问的目标地址，可以是基础地址，这样方便在这个网站的其他api口调用数据
        changeOrigin: true,
        secure: false, // 如果是https接口，需要配置这个参数
        rewrite: (path) => path.replace(/^\/api/, ''),
        // 要记得加rewrite这句
      },
    },
  },
  base: './',
  plugins: [
      vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@/':`${process.cwd()}/src/`// 注意这里可能需要根据你的项目结构进行调整
    }
  },
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // api: "modern-compiler", // Element Plus 中的解决办法
        silenceDeprecations: ['legacy-js-api']
      },
    },
    postcss: {
      plugins: [
        /**
         * 插件配置如下：
         * - rootValue: 设定根元素的字体大小，这里设置为16px，作为转换的基准。
         * - unitPrecision: 设定转换后的CSS属性值的小数位数，这里设置为5位。
         * - minPixelValue: 设定小于多少像素的px值，不进行转换。
         * - propList: 指定需要转换的CSS属性，"*"表示所有属性，也可以用 ! 进行排除。
         * - selectorBlackList: 忽略的选择器列表，这里排除了以".am-"开头的选择器。
         * - replace: 是否直接替换包含 px 的规则。
         * - mediaQuery: 是否在媒体查询中转换px。
         * - exclude: 忽略某些文件，比如node_modules中的文件。类型： string | regexp | function | array
         */
        postCssPxToRem({
          rootValue: 192,
          unitPrecision: 5,
          minPixelValue: 0.5,
          propList: ["*", "!border"],
          selectorBlackList: ['.el-'],
          replace: true,
          mediaQuery: false,
          exclude: /node_modules/,
        }),
      ],
    },

  }
})
